<template>
	<view class="mx-menu-btn" @tap="onTap">
		<image class="btn-icon" :src="icon" mode="heightFix"></image>
		<text class="btn-name">{{name}}</text>
	</view>
</template>

<script>
	export default {
		name:"MxMenuBtn",
		props: {
			icon: {
				type: String
			},
			
			name: {
				type: String
			},
			
			href: {
				type: String
			},
			
			webUrl: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			onTap() {
				if(this.webUrl) {
					window.location.href = this.href
					
					return
				}
				uni.navigateTo({
					url: this.href
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';
.mx-menu-btn{
	font-family: $font-family;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	.btn-icon{
		height: 54rpx;
	}
	
	.btn-name{
		margin-top: 20rpx;
		color: $color-title;
		font-size: 16px;
	}
}
</style>
